<template>
  <div class="ele-body">

    <el-card shadow="never"
             style="margin-top:20px">
      <el-row :gutter="15"
              style="margin-bottom: 30px;">
        <el-col v-bind="styleResponsive ? { lg: 4, md: 12 } : { span: 5 }">
          <div class="singlePalaceGrid flex-column">
            <div>
              <img class="icon"
                   src="../../../assets/组合 1900.png"
                   alt="" />
            </div>
            <div class="accumulateNum flex-column">
              <div>合伙人数量(总) </div>
              <vue-count-up class="Num"
                            :end-val="
                associateStatistic?.associateNum
                  ? associateStatistic?.associateNum
                  : '0'
              " />
              <!-- <div class="Num">{{ siteNumObject.disbursementsTotal?siteNumObject.disbursementsTotal:'0' }}</div> -->

            </div>
          </div>
        </el-col>
        <el-col v-bind="styleResponsive ? { lg: 4, md: 12 } : { span: 5 }">
          <div class="singlePalaceGrid flex-column">
            <div>
              <img class="icon"
                   src="../../../assets/组合 1899.png"
                   alt="" />
            </div>

            <div class="accumulateNum flex-column">
              <div>推广员数量(总) </div>
              <vue-count-up class="Num"
                            :end-val="
                associateStatistic?.promoterNum
                  ? associateStatistic?.promoterNum
                  : '0'
              " />
              <!-- <div class="Num">{{ siteNumObject.disbursementsTotal?siteNumObject.disbursementsTotal:'0' }}</div> -->

            </div>
          </div>
        </el-col>

        <el-col v-bind="styleResponsive ? { lg: 4, md: 12 } : { span: 5 }">
          <div class="singlePalaceGrid flex-column">
            <div>
              <img class="icon"
                   src="../../../assets/组合 1901.png"
                   alt="" />
            </div>
            <div class="accumulateNum flex-column">
              <div>合伙人已提现(元) </div>
              <vue-count-up class="Num"
                            :options="countUpOptions"
                            :end-val="
                associateStatistic?.allAssociateTotalWithdraw
                  ?associateStatistic?.allAssociateTotalWithdraw
                  : '0.00'
              " />
              <!-- <div class="Num">{{ siteNumObject.disbursementsTotal?siteNumObject.disbursementsTotal:'0' }}</div> -->

            </div>
          </div>
        </el-col>

        <el-col v-bind="styleResponsive ? { lg: 4, md: 12 } : { span: 5 }">
          <div class="singlePalaceGrid flex-column">
            <div>
              <img class="icon"
                   src="../../../assets/组合 1903.png"
                   alt="" />
            </div>
            <div class="accumulateNum flex-column">
              <div>推广员已提现(元)</div>
              <vue-count-up class="Num"
                            :options="countUpOptions"
                            :end-val="
                associateStatistic?.allPromoterTotalWithdraw
                  ?associateStatistic?.allPromoterTotalWithdraw
                  : '0.00'
              " />
              <!-- <div class="Num">{{ siteNumObject.disbursementsTotal?siteNumObject.disbursementsTotal:'0' }}</div> -->

            </div>
          </div>
        </el-col>

        <el-col v-bind="styleResponsive ? { lg: 4, md: 12 } : { span: 5 }">
          <div class="singlePalaceGrid flex-column">
            <div>
              <img class="icon"
                   src="../../../assets/组合 1907.png"
                   alt="" />
            </div>
            <div class="accumulateNum flex-column">
              <div>合伙人收益{{ '('+configBS.currency_name+')' }}</div>
              <vue-count-up class="Num"
                            :options="countUpOptions"
                            :end-val="
               associateStatistic?.allAssociateTotalAmount
                  ?associateStatistic?.allAssociateTotalAmount
                  : '0.00'
              " />
              <!-- <div class="Num">{{ siteNumObject.disbursementsTotal?siteNumObject.disbursementsTotal:'0' }}</div> -->

            </div>
          </div>
        </el-col>

        <el-col v-bind="styleResponsive ? { lg: 4, md: 12 } : { span: 5 }">
          <div class="singlePalaceGrid flex-column">
            <div>
              <img class="icon"
                   src="../../../assets/组合 1906.png"
                   alt="" />
            </div>
            <div class="accumulateNum flex-column">
              <div>推广员收益{{ '('+configBS.currency_name+')' }}</div>
              <vue-count-up class="Num"
                            :options="countUpOptions"
                            :end-val="
               associateStatistic?.allPromoterTotalAmount
                  ? associateStatistic?.allPromoterTotalAmount
                  : '0.00'
              " />
              <!-- <div class="Num">{{ siteNumObject.disbursementsTotal?siteNumObject.disbursementsTotal:'0' }}</div> -->

            </div>
          </div>
        </el-col>

      </el-row>

      <!-- 搜索表单 -->
      <role-search @search="reload" />
      <!-- 数据表格 -->

      <ele-pro-table ref="table"
                     :columns="columns"
                     :datasource="datasource"
                     :selection.sync="selection"
                     tool-class="ele-toolbar-form"
                     row-key="id">
        <!-- 表头工具栏 -->
        <template v-slot:toolbar>
          <!-- <el-button size="small"
                     type="primary"
                     icon="el-icon-plus"
                     class="ele-btn-icon"
                     @click="openEdit()">
            添加
          </el-button> -->

        </template>

        <template v-slot:img="{ row }">
          <div><img class="categoryImages"
                 :src="row.img"
                 alt="" /></div>
        </template>
        <template v-slot:associate_addr1="{ row }">
          <div>{{  row.associate_addr.split('-')[0]}}</div>
        </template>
        <template v-slot:associate_addr2="{ row }">
          <div>{{  row.associate_addr.split('-')[1]}}</div>
        </template>
        <template v-slot:content="{ row }">
          <div v-html="row.content"></div>
        </template>
        <template v-slot:price="{ row }">
          <div>{{ row.price?row.price:'免费申请' }}</div>
        </template>

        <!-- 状态列 -->
        <template v-slot:state="{ row }">
          <el-tag v-if="row.state == 0"
                  type="warning"
                  :underline="false">
            未申请
          </el-tag>
          <el-tag v-if="row.state == 1"
                  type="success"
                  :underline="false">
            审核中
          </el-tag>
          <el-tag v-if="row.state == 2"
                  type="primary"
                  :underline="false">
            审核通过
          </el-tag>
          <el-tag v-if="row.state == 3"
                  type="danger"
                  :underline="false">
            驳回
          </el-tag>
        </template>
        <!-- <template v-slot:state="{ row }">
          


          <div>
            {{is_agreeFn(row.state)  }}
          </div>
        </template> -->
        <template v-slot:sort="{ row }">
          <i class="sort-handle el-icon-rank ele-text-secondary"
             style="cursor: move"></i>
          <div v-if="false">{{ row }}</div>
        </template>
        <!-- 操作列 -->
        <template v-slot:action="{ row }">

          <el-link v-if="row.state==1||row.state==3"
                   type="primary"
                   :underline="false"
                   icon="el-icon-view"
                   @click="distributionAuditStatus(row)">
            审核
          </el-link>
          <el-link v-if="row.state==2"
                   type="primary"
                   icon="el-icon-edit"
                   :underline="false"
                   @click="openEdit (row)">
            比例设置
          </el-link>
          <el-link v-if="row.state==2&&row.promoterList.length"
                   type="warning"
                   :underline="false"
                   icon="el-icon-view"
                   @click="openPromoters(row)">
            查看推广员
          </el-link>
          <el-link v-if="row.state==2"
                   type="success"
                   :underline="false"
                   icon="el-icon-view"
                   @click="openDetail(row)">
            详情
          </el-link>
          <el-link v-if="row.state==2"
                   type="primary"
                   :underline="false"
                   icon="el-icon-edit"
                   @click="openAdd(row)">
            添加推广员
          </el-link>

        </template>
      </ele-pro-table>

    </el-card>
    <!-- 合伙人 -->
    <ele-modal width="600px"
               height="300px"
               title="合伙人审核"
               :visible.sync="auditStatusVisible"
               :maxable="true">
      <!-- class="SigningReminder" -->
      <div style="margin-bottom: 10px;">姓名:{{ distributionData?.name }}</div>
      <div style="margin-bottom: 10px;">电话:{{ distributionData?.phone }}</div>
      <div style="margin-bottom: 10px;">地址:{{ distributionData?.associate_addr }}</div>
      <el-radio-group v-model="distributionStatus"
                      @change="inputChange">

        <el-radio :label="2"
                  v-if="distributionData?.state == 1">审核通过</el-radio>

        <el-radio :label="3"
                  v-if="distributionData?.state == 1||distributionData?.state == 3">驳回</el-radio>
      </el-radio-group>
      <el-form ref="form"
               style="margin-top: 20px;"
               :model="form"
               :rules="rules"
               label-width="100px">
        <!-- <el-form-item label="跳转类型:"
                      prop="type">
          <el-radio-group v-model="form.type"
                          style="min-width: 700px">
            <el-radio :label="1"
                      :value="1">启动</el-radio>
            <el-radio :label="2"
                      :value="2">禁用 </el-radio>

          </el-radio-group>
        </el-form-item> -->
        <el-form-item v-if="!showTextarea"
                      label="搭子比例:"
                      prop="daziPercent">
          <el-input clearable
                    :maxlength="100"
                    type="number"
                    @blur="(e) => inputChangeWx(e, form.daziPercent,'daZiRatio')"
                    v-model="form.daziPercent"
                    placeholder="请设置搭子比例"><template slot="append">%</template>
          </el-input>
        </el-form-item>
        <el-form-item v-if="!showTextarea"
                      label="服务比例:"
                      prop="servicePercent">
          <el-input clearable
                    :maxlength="100"
                    type="number"
                    @blur="(e) => inputChangeWx(e, form.servicePercent,'fuWuRatio')"
                    v-model="form.servicePercent"
                    placeholder="请设置服务比例"><template slot="append">%</template>
          </el-input>
        </el-form-item>
        <el-form-item v-if="!showTextarea"
                      label="社群比例:"
                      prop="communityPercent">
          <el-input clearable
                    :maxlength="100"
                    type="number"
                    @blur="(e) => inputChangeWx(e, form.communityPercent,'sheQunRatio')"
                    v-model="form.communityPercent"
                    placeholder="请设置社群比例"><template slot="append">%</template>
          </el-input>
        </el-form-item>
        <el-form-item v-if="showTextarea"
                      label="驳回内容:"
                      prop="rationale">
          <el-input :disabled="distributionData?.state == 3 ? true : false"
                    type="textarea"
                    resize="none"
                    placeholder="请输入内容"
                    v-model="form.rationale"> </el-input>
        </el-form-item>
        <!-- <div style="margin-top: 15px;">
    
        
       </div> -->

      </el-form>

      <span slot="footer"
            class="dialog-footer">
        <el-button @click="auditStatusVisible = false">取 消</el-button>
        <el-button type="primary"
                   :loading="loading"
                   @click="auditStatusVisibleFn(distributionData,distributionStatus)">确定</el-button>
      </span>
    </ele-modal>
    <!-- 编辑弹窗 -->
    <role-edit :data="current"
               :drawerEditBoolen.sync="drawerEditBoolen"
               @done="reload" />
    <RoleEditAdd :data="currentAdd"
                 :isEdit="false"
                 :drawerEditBoolen.sync="drawerEditBoolenAdd"
                 @done="reload" />
    <roleEditPromoters :data="currentPromoters"
                       :drawerEditBoolen.sync="drawerEditBoolenPromoters"
                       @done="reload" />
    <partnerDetails :data="currentDetail"
                    :drawerEditBoolen.sync="drawerEditBoolenDetail"
                    @done="reload" />

    <!-- 权限分配弹窗 -->
  </div>
</template>

	<script>


import RoleSearch from './components/role-search';
// import Sortable from 'sortablejs';
import RoleEdit from './components/role-edit';
import partnerDetails from './components/partnerDetails'
import RoleEditAdd from './components/role-editAdd';
import roleEditPromoters from './components/role-editPromoters'
import { distributorList, agreeCheck, distributorEditState } from '@/api/userList/index'
import { associateStatistic } from '@/api/partnerApi/index'
import VueCountUp from 'vue-countup-v2';
// import {
//   sitecCategoriesDelete,
//   siteCategoriesList,
//   siteCategoriesModify,
//   siteCategoriesDetail,
//   siteBatchCategoriesDelete
// } from '@/api/serviceManagement/categoriesList';
export default {
  name: 'Recharge',
  components: {
    RoleSearch,
    RoleEdit,
    RoleEditAdd,
    roleEditPromoters,
    partnerDetails,
    VueCountUp

  },
  data () {

    const DEFAULT_FORM = {
      daziPercent: '',
      servicePercent: '',
      communityPercent: '',
      rationale: ''
    };
    return {
      countUpOptions: {
        useEasing: true,
        useGrouping: true,
        separator: ',',
        decimal: '.',
        decimalPlaces: 2,
        prefix: '',
        suffix: ''
      },
      configBS: JSON.parse(localStorage.getItem('config')),
      associateStatistic: null,
      loading: false,
      // 表格列配置
      columns: [

        // {
        //   prop: 'id',
        //   label: '排序',
        //   sortable: 'custom',
        //   showOverflowTooltip: true,
        //   minWidth: 30,
        //   align: 'center',
        //   slot: 'sort'
        // },
        {
          columnKey: 'index',
          type: 'index',
          label: '序号',
          width: 60,
          align: 'center',
          showOverflowTooltip: true,
          fixed: 'left'
        },

        {
          prop: 'name',
          label: '合伙人姓名',
          sortable: 'custom',
          width: 115,
          align: 'center',
          showOverflowTooltip: true,

        },

        {
          prop: 'phone',
          label: '合伙人电话',
          sortable: 'custom',
          width: 115,
          showOverflowTooltip: true,

          align: 'center'
        },

        // {
        //   prop: 'associate_addr',
        //   label: '申请所在城市',
        //   sortable: 'custom',
        //   width: 135,
        //   showOverflowTooltip: true,
        //   align: 'center',

        // },
        {
          prop: 'surplus_income',
          label: '可提现收益',
          sortable: 'custom',

          showOverflowTooltip: true,
          align: 'center',

        },
        {
          prop: 'promoterTotay',
          label: '累计推广员',
          sortable: 'custom',

          showOverflowTooltip: true,
          align: 'center',

        },
        // {
        //   prop: 'todayAddPromoter',
        //   label: '今日新增推广员',
        //   sortable: 'custom',

        //   showOverflowTooltip: true,
        //   align: 'center',

        // },
        {
          prop: 'totayIncome',
          label: '累计收益',
          align: 'center',
          sortable: 'custom',
          showOverflowTooltip: true,
          minWidth: 110,

        },

        {
          prop: 'price',
          label: '支付金额(元)',
          sortable: 'custom',

          showOverflowTooltip: true,
          align: 'center',
          slot: 'price'

        },
        {
          prop: 'state',
          label: '申请状态',
          sortable: 'custom',

          showOverflowTooltip: true,
          align: 'center',
          slot: 'state'
        },
        {
          prop: 'addressGroup',
          label: '区域',
          align: 'center',
          children: [
            {
              prop: 'associate_addr',
              label: '省',
              align: 'center',
              slot: 'associate_addr1'
            },
            {
              prop: 'associate_addr',
              label: '市',
              align: 'center',
              slot: 'associate_addr2'

            },


          ]
        },



        {
          columnKey: 'action',
          label: '操作',
          minWidth: 200,
          align: 'center',
          resizable: false,
          slot: 'action',
          showOverflowTooltip: false,
          fixed: 'right'
        },



        {
          prop: 'create_time',
          label: '创建时间',
          align: 'center',
          sortable: 'custom',
          width: 145,
          showOverflowTooltip: true,
          formatter: (_row, _column, cellValue) => {
            return this.$util.toDateString(cellValue, 'yyyy-MM-dd HH:mm');
          }
        },

      ],
      // 表格选中数据
      selection: [],
      currentDetail: null,
      drawerEditBoolenDetail: false,

      // 当前编辑数据
      current: null,
      currentAdd: null,
      drawerEditBoolenAdd: false,
      // 是否显示编辑弹窗
      drawerEditBoolen: false,
      // 是否显示导入弹窗
      showAuth: false,
      showChoose: false,
      auditStatusVisible: false,
      drawerEditBoolenPromoters: false,
      currentPromoters: false,


      showTextareas: true,
      showTextarea: false,
      distributionData: {},
      form: { ...DEFAULT_FORM },
      distributionStatus: 2,
      rationale: '',
      rules: {
        daziPercent: [
          {
            required: true,
            message: '请填写搭子比例',
            trigger: 'blur'
          }
        ],


        servicePercent: [
          {
            required: true,
            message: '请填写服务比例',
            trigger: 'blur'
          }
        ],
        communityPercent: [
          {
            required: true,
            message: '请填写社群比例',
            trigger: 'blur'
          }
        ],
        rationale: [
          {
            required: true,
            message: '请填写驳回内容',
            trigger: 'blur'
          }
        ],

        // // 站点 图片上传
        // img: [
        //   { required: true, validator: categoryImage, trigger: 'change' }
        // ]
      },

    };
  },
  mounted () {

  },
  activated () {
    this.reload();
    this.init()
  },
  computed: {
    styleResponsive () {
      return this.$store.state.theme.styleResponsive;
    },
    is_agreeFn: function () {
      return function (status) {

        let orderStatus = '';
        // status订单状态（0.待付款 1.待接单 2.已接单 3.服务中 4.已完成 5.已取消/退款)
        orderStatus =
          status == 0 ? '未申请' : status == 1 ? '审核中' : status == 2 ? '审核通过' : '驳回'

        return orderStatus;
      };
    },
  },

  methods: {
    async init () {
      const res = await associateStatistic()
      console.log(res)
      if (res.code == 0) {

        this.associateStatistic = res.data
      }
    },

    inputChangeWx (e, value, val) {



      if (Number(value) > 100) {
        this.$message({
          message: '输入的折扣大于100请重新输入',
          type: 'warning'
        });
        if (val == 'daZiRatio') {
          this.form.daziPercent = 100;
        } else if (val == 'fuWuRatio') {
          this.form.servicePercent = 100;
        } else {
          this.form.communityPercent = 100;
        }

        return false;
      }

    },
    openPromoters (row) {
      if (row?.id) {
        // const res = await siteCategoriesDetail(row.id);

        this.currentPromoters = row;
        // 用户余额管理
        this.drawerEditBoolenPromoters = !this.drawerEditBoolenPromoters;
      } else {
        this.drawerEditBoolenPromoters = !this.drawerEditBoolenPromoters;
        this.currentPromoters = null;
      }
    },
    openDetail (row) {
      if (row?.id) {
        // const res = await siteCategoriesDetail(row.id);

        this.currentDetail = row;
        // 用户余额管理
        this.drawerEditBoolenDetail = !this.drawerEditBoolenDetail;
      } else {
        this.drawerEditBoolenDetail = !this.drawerEditBoolenDetail;
        this.currentDetail = null;
      }
    },
    distributionAuditStatus (row) {
      console.log(this.distributionStatus)
      this.auditStatusVisible = true
      this.distributionData = row
      this.distributionStatus = row.state == 1 ? 2 : row.state == 3 ? 3 : 2
      if (this.distributionStatus == 3) {
        this.showTextarea = true;
        console.log(row.rationale)
        this.form.rationale = row.rationale
      } else {

        this.showTextarea = false;
      }
    },
    auditStatusVisibleFn (row, distributionStatus) {


      if (row.state == 2 || row.state == 3) {
        this.auditStatusVisible = false
        this.form.rationale = null;
      } else {
        this.$refs['form'].validate(async (valid) => {
          // this.showTextarea = false;
          if (!valid) {
            return false;
          }
          // console.log({
          //   id: row.id,
          //   state: distributionStatus,
          //   rationale: this.form.rationale,
          //   daziPercent: this.form.daziPercent,
          //   servicePercent: this.form.servicePercent,
          //   communityPercent: this.form.communityPercent
          // })

          const res = await distributorEditState({
            id: row.id,
            state: distributionStatus,
            rationale: this.form.rationale,
            daziPercent: this.form.daziPercent,
            servicePercent: this.form.servicePercent,
            communityPercent: this.form.communityPercent
          })


          console.log(res)
          if (res.code == 0) {
            this.auditStatusVisible = false
            this.reload();
            this.$message.success(res.message);
            this.form.rationale = '';

          } else {
            this.$message.error(res.message);
          }

        });


      }

    },

    inputChange (e) {


      console.log(e)
      if (e == 3) {
        this.showTextarea = true;

        this.distributionStatus = e;
        this.form.daziPercent = ''
        this.form.servicePercent = ''
        this.form.communityPercent = ''


      } else {
        this.form.rationale = '';
        this.showTextarea = false;
        console.log(e)
        this.distributionStatus = e
      }
    },
    // rowDrop () {
    //   const tbody = document.querySelector('.el-table__body-wrapper tbody');
    //   const _this = this;
    //   Sortable.create(tbody, {
    //     forceFallback: true,
    //     dragClass: 'drag',
    //     delay: 100,
    //     animation: 1000,
    //     onEnd ({ newIndex, oldIndex }) {
    //       console.log(newIndex);
    //       console.log(oldIndex);
    //       //更换表格数据 后续拖动坐标才会正确
    //       let data = _this.$refs.table.getData();

    //       let nid = data[newIndex].id;
    //       let oid = data[oldIndex].id;

    //       const currRow = data.splice(oldIndex, 1)[0];
    //       data.splice(newIndex, 0, currRow);

    //       console.log(data);

    //       //   sortChange(data)
    //       //     .then((msg) => {

    //       //     })
    //       //     .catch((e) => {
    //       //       _this.$refs.table.reload();
    //       //     });

    //       //去数据库更换排序

    //       console.log(_this.$refs.table.getData());
    //     }
    //   });
    // },

    /* 表格数据源 */
    datasource ({ page, limit, where }) {
      return distributorList({
        page,
        limit,
        ...where,

      });
    },
    /* 刷新表格 */
    reload (where) {
      console.log(where)
      this.$refs.table.reload({ page: 1, where: where });
    },
    /* 显示编辑 */
    async openEdit (row) {
      console.log(row);
      if (row?.id) {
        // const res = await siteCategoriesDetail(row.id);

        this.current = row;
        // 用户余额管理
        this.drawerEditBoolen = !this.drawerEditBoolen;
      } else {
        this.drawerEditBoolen = !this.drawerEditBoolen;
        this.current = null;
      }
    },
    async openAdd (row) {
      console.log(row);
      if (row?.id) {
        // const res = await siteCategoriesDetail(row.id);

        this.currentAdd = row;
        // 用户余额管理
        this.drawerEditBoolenAdd = !this.drawerEditBoolenAdd;
      } else {
        this.drawerEditBoolenAdd = !this.drawerEditBoolenAdd;
        this.currentAdd = null;
      }
    },

    /* 更改状态 */
    editStatus (row) {
      const loading = this.$loading({ lock: true });
      upClassify({
        id: row.id,
        status: row.status,

      })
        .then((msg) => {
          console.log(msg)
          loading.close();
          this.$message.success(msg.message);
          this.reload();
        })
        .catch((e) => {
          loading.close();
          row.status = !row.status ? 1 : 2;
          this.$message.error(e.message);
        });
    },

    /* 显示分配权限 */
    openAuth (row) {
      this.current = row;
      this.showAuth = true;
    },
    /* 删除 */
    remove (row, is_agree) {
      const loading = this.$loading({ lock: true });
      agreeCheck({
        is_agree: is_agree,
        id: row.id,
      })
        .then((msg) => {
          loading.close();
          this.$message.success(msg.message);
          this.reload();
        })
        .catch((e) => {
          loading.close();
          this.$message.error(e.message);
        });
    },
    /* 批量删除 */
    // removeBatch () {
    //   if (!this.selection.length) {
    //     this.$message.error('请至少选择一条数据');
    //     return;
    //   }
    //   console.log(this.selection);
    //   this.$confirm('确定要删除选中的信息吗?', '提示', {
    //     type: 'warning'
    //   })
    //     .then(() => {
    //       const loading = this.$loading({ lock: true });
    //       console.log(this.selection.map((d) => d.id));
    //       siteBatchCategoriesDelete(this.selection.map((d) => d.id))
    //         .then((msg) => {
    //           loading.close();
    //           this.$message.success(msg);
    //           this.reload();
    //         })
    //         .catch((e) => {
    //           loading.close();
    //           this.$message.error(e.message);
    //         });
    //     })
    //     .catch(() => { });
    // }
  }
};
	</script>

	<style lang="less">
.singlePalaceGrid {
  flex: 50%; /*0 不放大  0 不收缩  子项大小为父容器25%*/

  height: 93px;
  display: flex;
  align-items: center;
  box-sizing: border-box;
  padding-left: 28px;
  //   border: 1px solid #f5f6fb;
  .accumulateNum {
    margin-left: 8px;
    height: 62px;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    .Num {
      color: #1e6ceb;
      font-size: 20px;
    }
  }
}
.icon {
  width: 32px;
  height: 32px;
}
.categoryImages {
  width: 50px;
  height: 50px;
}
</style>
